<template>
  <div
    v-if="showNotice"
    class="c-text-hidden c-ph24 c-pv15"
    :style="{background: bgColor}"
  >
    <div class="c-flex-row c-aligni-center c-justify-sb">
      <div class="c-ww28 c-hh24 c-flex-row c-flex-center">
        <i
          class="iconfont"
          :style="{color: iconColor}"
        >&#xe667;</i>
      </div>
      <div class="c-flex-row c-text-hidden c-mh10  c-flex-1" @click="handleClickNotice()">
        <div
          class="notice-content"
          id="noticeContent"
          :style="{animationDuration: animationDuration,animationPlayState: animationPlayState}"
        >
          <span
            class="notice-text c-fs22"
            :class="textColor"
          >{{showText}}</span>
        </div>
      </div>
      <div class="c-ww20 c-hh20 c-flex-row c-flex-center">
        <i
          class="iconfont"
          :class="rightColor"
          @click="close()"
        >&#xe750;</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoticeBar",
  props: {
    showText: {
      type: String,
      default: ""
    },
    showNotice: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: '#FFF0E9'
    },
    iconColor: {
      type: String,
      default: "#FF7225"
    },
    rightColor: {
      type: String,
      default: "c-fc-gray"
    },
    textColor: {
      type: String,
      default: "c-fc-xblack"
    },
    speed: {
      type: [Number, String],
      default: 80
    },
    autoplay: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      animationDuration: '10s', // 动画执行时间
      animationPlayState: 'paused', // 动画的开始和结束执行
      textWidth: 0, // 滚动的文字宽度
      boxWidth: 0, // 供文字滚动的父盒子的宽度，和前者一起为了计算滚动速度
    }
  },
  watch: {
    speed(val) {
      this.initSize();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSize();
    });
  },
  methods: {
    initSize() {
      let query = [];
      let textQuery = new Promise((resolve, reject) => {
        if (document.querySelector("#noticeContent") == null) return;
        this.textWidth = document.querySelector("#noticeContent").getBoundingClientRect().width
        resolve();
      })
      query.push(textQuery);
      Promise.all(query).then(() => {
        this.animationDuration = `${this.textWidth / this.speed}s`;
        this.animationPlayState = "paused";
        setTimeout(() => {
          if (this.autoplay) this.animationPlayState = 'running';
        }, 10);
      })
    },
    // 关闭公告
    close() {
      this.$emit("handleClickCloseNotice")
    },
    handleClickNotice() {
      this.$emit("handleClickNotice")
    },
  }
}
</script>

<style lang="less" scoped>
.notice-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  animation: u-loop-animation 10s linear infinite both;
  text-align: right;
  padding-left: 100%;
  .notice-text {
    word-break: keep-all;
    white-space: nowrap;
  }
}
@keyframes u-loop-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>